import React, { useState, useEffect } from "react";
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
import { AtInputNumber, AtFloatLayout, AtInput } from "taro-ui";
import api from "@api/api";
export default (props) => {
  const [open, setOpen] = useState(false);
  const [clinicSchemesId, setClinicSchemesId] = useState(""); // 科室方案id
  const [floatCont, setFloatCont] = useState({
    title: "",
    type: "other",
    pricingSchemesId: "",
  });
  const [priceInfo, setPriceInfo] = useState({}); // 价格方案
  const [param, setParam] = useState({});
  useEffect(() => {
    if (props.clinicSchemesId) {
      setPriceInfo(props.priceInfo);
      setClinicSchemesId(props.clinicSchemesId);
    }
  }, [props.clinicSchemesId, props.priceInfo]);
  // 关闭弹窗
  const closeFloat = () => {
    setOpen(false);
  };
  // 打开弹窗
  const openFloat = (title, id, type = "") => {
    const obj = {
      title: title,
      type: type,
      pricingSchemesId: id,
    };
    setFloatCont({ ...obj });
    setOpen(true);
  };
  // 监听input修改
  const onInput = (key, value) => {
    setParam({ ...param, [key]: value });
  };
  // 料价格增加
  const costIncrease = async (id, value) => {
    const { code } = await api.savePricing({ number: value }, id);
    if (code == 200) {
      props.usePriceFn(clinicSchemesId);
    }
  };
  // 保存价格
  const save = async () => {
    const { code, errorMessage } = await (floatCont.type == "other"
      ? api.saveOtherPricingSchemes(param, clinicSchemesId)
      : api.savePricing(param, floatCont.pricingSchemesId));
    if (code == 200) {
      props.usePriceFn(clinicSchemesId);
      setOpen(false);
    } else {
      console.log(errorMessage);
    }
  };
  // 删除价格
  const deleteSchemes = async (id) => {
    const { code } = await api.deletePricingSchemes(id);
    if (code == 200) {
      props.usePriceFn(clinicSchemesId);
    }
  };
  // 跳转选择材料
  const goSelectMaterial = async () => {
    Taro.navigateTo({
      url: `/pages/select-material/index?id=${clinicSchemesId}`,
    });
  };
  return (
    <>
      {props.type == "" && priceInfo && (
        <>
          <View className="totalTimes listBox">
            <View className="fontBold borderBottom">
              总就诊次数
              <View className="font">1次</View>
            </View>
            <View className="fontBold title">价格方案</View>
            <View className="totalTimesCost">
              <View className="otExpenses">
                <View className="fontBold">手术费</View>
                {priceInfo.surgicalItemList &&
                  priceInfo.surgicalItemList.map((item, index) => {
                    return (
                      <View className="otExpensesList at-row at-row__align--center">
                        <View className="otExpensesDec at-col">
                          <View
                            className="at-row at-row__align--center"
                            onClick={() => {
                              openFloat(
                                `${item.name}单价`,
                                item.pricingSchemesId
                              );
                            }}
                          >
                            <View className="font at-col">{item.name}</View>
                            <View className="font at-col at-col-1 at-col--auto">
                              ¥{item.unitPrice}
                            </View>
                          </View>
                        </View>
                        <View className="at-col at-col-1 at-col--auto">
                          <AtInputNumber
                            value={item.number}
                            onChange={costIncrease.bind(
                              this,
                              item.pricingSchemesId
                            )}
                          />
                        </View>
                      </View>
                    );
                  })}
              </View>
              <View className="otExpenses">
                <View className="fontBold title">
                  材料费{" "}
                  <View className="fontBlue" onClick={goSelectMaterial}>
                    添加材料费用
                  </View>
                </View>
                {priceInfo.materialsItemList &&
                  priceInfo.materialsItemList.map((item, index) => {
                    return (
                      <View className="otExpensesList at-row at-row__align--center">
                        <View className="otExpensesDec at-col">
                          <View
                            className="at-row at-row__align--center"
                            onClick={() => {
                              openFloat(
                                `${item.name}单价`,
                                item.pricingSchemesId
                              );
                            }}
                          >
                            <View className="font at-col">{item.name}</View>
                            <View className="font at-col at-col-1 at-col--auto otExpensesDlt">
                              ¥{item.unitPrice}
                              <View
                                className="iconfont icon-shanchu"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  deleteSchemes(item.pricingSchemesId);
                                }}
                              ></View>
                            </View>
                          </View>
                        </View>
                        <View className="at-col at-col-1 at-col--auto ">
                          <AtInputNumber
                            value={item.number}
                            onChange={costIncrease.bind(
                              this,
                              item.pricingSchemesId
                            )}
                          />
                        </View>
                      </View>
                    );
                  })}
              </View>
              <View className="otExpenses">
                <View className="font title">
                  其他费用
                  <View
                    className="fontBlue"
                    onClick={() => {
                      openFloat("添加其他费用", "", "other");
                    }}
                  >
                    添加其他费用
                  </View>
                </View>
                {priceInfo.othersItemList &&
                  priceInfo.othersItemList.map((item, index) => {
                    return (
                      <View className="otExpensesList at-row at-row__align--center">
                        <View className="otExpensesDec at-col">
                          <View
                            className="at-row at-row__align--center"
                            onClick={() => {
                              openFloat(
                                `${item.name}单价`,
                                item.pricingSchemesId
                              );
                            }}
                          >
                            <View className="font at-col">{item.name}</View>
                            <View className="font at-col at-col-1 at-col--auto otExpensesDlt">
                              ¥{item.unitPrice}
                              <View
                                className="iconfont icon-shanchu"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  deleteSchemes(item.pricingSchemesId);
                                }}
                              ></View>
                            </View>
                          </View>
                        </View>
                        <View className="at-col at-col-1 at-col--auto">
                          <AtInputNumber
                            value={item.number}
                            onChange={costIncrease.bind(
                              this,
                              item.pricingSchemesId
                            )}
                          />
                        </View>
                      </View>
                    );
                  })}
              </View>
              <View className="total">
                小计
                <View className="totalNum">¥{priceInfo.totalAmount}</View>
              </View>
            </View>
          </View>

          {/* 弹窗 */
          open && (
            <View className="float input">
              <AtFloatLayout
                isOpened={open}
                title={floatCont.title}
                onClose={closeFloat.bind(this)}
              >
                <View>
                  {floatCont.type == "other" && open ? (
                    <View>
                      <View>
                        <View className="fontBold">其他费用名称</View>
                        <AtInput
                          value={param.name}
                          name="name"
                          placeholder="其他费用"
                          placeholderClass="font"
                          onChange={onInput.bind(this, "name")}
                        />
                      </View>
                      <View>
                        <View className="fontBold">设置单价</View>
                        <AtInput
                          value={param.unitPrice}
                          name="unitPrice"
                          placeholder="请输入单价"
                          placeholderClass="font"
                          onChange={onInput.bind(this, "unitPrice")}
                        />
                      </View>
                    </View>
                  ) : (
                    <View className="floatInput">
                      {" "}
                      <AtInput
                        value={param.unitPrice}
                        name="unitPrice"
                        placeholder="请输入单价"
                        placeholderClass="font"
                        onChange={onInput.bind(this, "unitPrice")}
                      />
                    </View>
                  )}
                </View>
                <View className="floatBtn">
                  <View className="btnNo" onClick={closeFloat}>
                    取消
                  </View>
                  <View className="btnOk" onClick={save}>
                    确认
                  </View>
                </View>
              </AtFloatLayout>
            </View>
          )}
        </>
      )}
      {props.type == "patient" && priceInfo && (
        <View className="totalTimes listBox">
          <View className="fontBold borderBottom">
            总就诊次数
            <View className="font">1次</View>
          </View>
          <View className="fontBold title">价格方案</View>
          <View className="totalTimesCost">
            <View className="otExpenses">
              <View className="fontBold">手术费</View>
              {priceInfo.surgicalItemList &&
                priceInfo.surgicalItemList.map((item, index) => {
                  return (
                    <View className="otExpensesList at-row font">
                      <View className="at-col">{item.name}</View>
                      <View className="at-col at-col-1 at-col--auto">
                        ¥{item.unitPrice} x {item.number}
                      </View>
                    </View>
                  );
                })}
            </View>
            <View className="otExpenses">
              <View className="fontBold title">材料费</View>
              {priceInfo.materialsItemList &&
                priceInfo.materialsItemList.map((item, index) => {
                  return (
                    <View className="otExpensesList at-row font">
                      <View className="at-col">{item.name}</View>
                      <View className="at-col at-col-1 at-col--auto">
                        ¥{item.unitPrice} x {item.number}
                      </View>
                    </View>
                  );
                })}
            </View>
            <View className="otExpenses">
              <View className="font title">其他费用</View>
              {priceInfo.othersItemList &&
                priceInfo.othersItemList.map((item, index) => {
                  return (
                    <View className="otExpensesList at-row font">
                      <View className="at-col">{item.name}</View>
                      <View className="at-col at-col-1 at-col--auto">
                        ¥{item.unitPrice} x {item.number}
                      </View>
                    </View>
                  );
                })}
            </View>
            <View className="total">
              小计
              <View className="totalNum">¥{priceInfo.totalAmount}</View>
            </View>
          </View>
        </View>
      )}
    </>
  );
};
